<template>
  <div style="display: flex; justify-content: space-between; margin: 20px">
    <div
      id="fid"
      ref="fid"
      style="
        width: 90%;
        height: 460px;
        background: #040535;
        border: 3px solid #1cdbfe;
        border-radius: 8px;
      "
    >
      <video
        id="videoPlayer"
        ref="videoPlayer"
        class="video-js"
        style="width: 100%; height: 100%"
      ></video>
    </div>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
  data() {
    return {
      open: false,
      playerOptions: {
        autoplay: true, // 如果true,浏览器准备好时开始播放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload: "auto", // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN", //汉化
        fluid: false, // 当true时，播放器将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "application/x-mpegURL",
            src: "https://open.ys7.com/v3/openlive/BA9068915_1_1.m3u8?expire=1743734846&id=697759576165388288&t=01ff9c701f728a2aa3716ca1e3764668b06ee4f3effa76f3869d91ba1a05ea65&ev=100",
          },
        ],
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true, //视频时长时间显示
          remainingTimeDisplay: false, //剩余时间显示
          fullscreenToggle: true, // 全屏按钮
        },

        errorDisplay: false, //错误显示
        posterImage: false, //视频的预览海报图片显示
        bigPlayButton: true, //视频中间的播放按钮显示
        textTrackDisplay: false,
      },

      player: null,
      player1: null,
      id: null,
      id1: null,
    };
  },
  methods: {
    goMonitor() {
      this.open = true;
      if (this.player) {
        this.player.dispose();
        this.id.innerHTML =
          ' <video id="videoPlayer" ref="videoPlayer" class="video-js"  style="width: 100%;height: 100%"></video>';
      }

      this.$nextTick(() => {
        this.id = document.getElementById("fid");
        this.player = videojs(
          document.getElementById("videoPlayer"),
          this.playerOptions
        );
        this.player.play();
      });
    },
  },
  mounted() {
    this.goMonitor();
  },
};
</script>

<style scoped lang="scss">
:deep(
    .vjs-has-started .vjs-control-bar,
    .vjs-audio-only-mode .vjs-control-bar
  ) {
  display: flex !important;
}
</style>
